<template>
  <div>
    <Head title="电站信息" isBack>
      <template #content>
        <Detail
          :columns="1"
          :form="detailForm"
          :detail="data.detailData"
          :labelWidth="80"
          align="left"
        ></Detail>
      </template>
    </Head>
    <Head title="限制规则">
      <template #content>
        <Detail
          :columns="1"
          :form="detailForm1"
          :detail="data.detailData"
          :labelWidth="80"
          align="left"
        ></Detail>
      </template>
    </Head>
    <Head title="限制机构">
      <template #content>
        <Detail
          class="margin-line"
          :columns="1"
          :form="detailForm2"
          :detail="data.detailData"
          :labelWidth="80"
          align="left"
        ></Detail>
      </template>
    </Head>
  </div>
</template>

<script lang="ts" setup>
import Head from '@/components/head/index.vue';
import Detail from '@/components/form/detail.vue';
import { getWhiteList } from '@/service/apis/pile';
import { queryDicByParent } from '@/service/apis/api';
import { WEEK } from '@/utils/dictionaries';

const route = useRoute();
const {
  query: { id },
} = route;

queryDicByParent({
  listDtos: ['whiteListStationType', 'whiteListUserType'],
}).then((res: any) => {
  detailForm[1].dic = [...res.whiteListStationType];
  detailForm2[0].dic = [...res.whiteListUserType];
});

const detailForm = reactive([
  {
    label: '名称',
    prop: 'name',
  },
  {
    label: '限制站点',
    prop: 'stationType',
    comName: 'radio',
    dic: [] as any,
  },
  {
    label: '',
    prop: 'treeStationBeans',
    comName: 'tree',
    dic: [] as any,
  },
]);
const detailForm1 = reactive([
  {
    label: '限制日期',
    prop: 'startDate',
    template: (row: any) => {
      return row.startDate && row.endDate
        ? `${row.startDate} 至 ${row.endDate}`
        : '-';
    },
  },
  {
    label: '限制周天',
    prop: 'restrictedDay',
    comName: 'checkbox',
    dic: WEEK,
  },
  {
    label: '每日时段',
    prop: 'startTimeFrame',
    template: (row: any) => {
      return row.startTimeFrame && row.endTimeFrame
        ? `${row.startTimeFrame} 至 ${row.endTimeFrame}`
        : '-';
    },
  },
]);
const detailForm2: any = reactive([
  {
    label: '限制用户',
    prop: 'userType',
    comName: 'radio',
    dic: [] as any,
  },
]);
const data = reactive({
  detailData: {} as any,
});
getWhiteList(id).then((res: any) => {
  console.log('res---', res);
  data.detailData = res;
  // 电站树
  detailForm[2].dic = res.treeStationBeans;

  // 用户树
  if (res.userType === '3' || res.userType === '4') {
    detailForm2.push({
      label: '',
      prop: 'treeUserBeans',
      comName: 'tree',
      dic: res.treeUserBeans,
    });
  } else if (res.userType === '5') {
    detailForm2.push({
      label: '',
      prop: 'astrictIds',
      comName: 'textarea',
    });
  }
});
</script>